<template>
  <div :class="disable ? 'remove' : ''">
    <a-row :gutter="12">
      <a-col :span="8">
        <a-form-item :colon="false" label="一寸白底电子版照片">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexBlackWhitePhoto', true)"
              list-type="picture-card"
              :file-list="BlackWhitePhotoList"
              @preview="handlePreview"
              @remove="previewVisible"
              @change="handleChange($event, 'annexBlackWhitePhoto', true)"
            >
              <div v-if="BlackWhitePhotoList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="16">
        <a-form-item :colon="false" label="身份证照（正反面）">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexIdCard', false, 2)"
              list-type="picture-card"
              multiple
              :file-list="IdCardList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexIdCard', false)"
            >
              <div v-if="IdCardList.length < 2">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="18">
        <a-form-item :colon="false" label="户口本（首页、索引页、本人页）">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexHousehold', false, 3)"
              list-type="picture-card"
              multiple
              :file-list="HouseholdList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexHousehold', false)"
            >
              <div v-if="HouseholdList.length < 3">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item :colon="false" label="专业资格证">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexMajor', true)"
              list-type="picture-card"
              :file-list="MajorList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexMajor', true)"
            >
              <div v-if="MajorList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="8">
        <a-form-item :colon="false" label="计算机等级证书">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexNcreLevel', true)"
              list-type="picture-card"
              :file-list="NcreLevelList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexNcreLevel', true)"
            >
              <div v-if="NcreLevelList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :colon="false" label="无犯罪记录证明">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexNoCriminal', true)"
              list-type="picture-card"
              :file-list="NoCriminalList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexNoCriminal', true)"
            >
              <div v-if="NoCriminalList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :colon="false" label="执业资格证">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexPractising', true)"
              list-type="picture-card"
              :file-list="PractisingList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexPractising', true)"
            >
              <div v-if="PractisingList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="8">
        <a-form-item :colon="false" label="普通话等级证书">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexPthLevel', true)"
              list-type="picture-card"
              :file-list="PthLevelList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexPthLevel', true)"
            >
              <div v-if="PthLevelList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :colon="false" label="奖励证明">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexReward', true)"
              list-type="picture-card"
              :file-list="RewardList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexReward', true)"
            >
              <div v-if="RewardList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :colon="false" label="英语等级证书">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexEnglishLevel', true)"
              list-type="picture-card"
              :file-list="EnglishLevelList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexEnglishLevel', true)"
            >
              <div v-if="EnglishLevelList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="12">
      <a-col :span="8">
        <a-form-item :colon="false" label="机动车驾驶证">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexDrivingLicense', true)"
              list-type="picture-card"
              :file-list="DrivingLicenseList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexDrivingLicense', true)"
            >
              <div v-if="DrivingLicenseList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :colon="false" label="毕业证">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexDiploma', true)"
              list-type="picture-card"
              :file-list="DiplomaList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexDiploma', true)"
            >
              <div v-if="DiplomaList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :colon="false" label="学位证">
          <div class="clearfix">
            <a-upload
              :disabled="disable"
              :custom-request="p => uploadFiles(p, 'annexDegree', true)"
              list-type="picture-card"
              :file-list="DegreeList"
              @preview="handlePreview"
              @change="handleChange($event, 'annexDegree', true)"
            >
              <div v-if="DegreeList.length < 1">
                <a-icon type="plus" />
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </a-form-item>
      </a-col>
    </a-row>
    <div v-if="!disable">
      <a-col :span="22">
        <div class="basicInfo-button-group">
          <a-button class="mr12" @click="cancel">取消</a-button>
          <a-button type="primary" @click="submit">确认</a-button>
        </div>
      </a-col>
    </div>
  </div>
</template>
<script>
import { uploadFile } from "@/api/file/file";
import { updateEmpAllInfo } from "@/api/staff/staff";
export default {
  props: {
    employInfo: {
      type: Object
    },
    disable: {}
  },
  inject: ["reload"],
  data() {
    return {
      previewImage: "",
      previewVisible: false,
      IdCardList: [],
      annexIdCardList: [],
      DegreeList: [],
      DiplomaList: [],
      DrivingLicenseList: [],
      EnglishLevelList: [],
      RewardList: [],
      PthLevelList: [],
      NoCriminalList: [],
      NcreLevelList: [],
      MajorList: [],
      HouseholdList: [],
      annexHouseholdList: [],
      BlackWhitePhotoList: [],
      PractisingList: []
    };
  },
  created() {
    this.initData(this.employInfo);
  },
  watch: {
    employInfo(val) {
      this.initData(val);
    }
  },
  methods: {
    cancel() {
      this.$emit("cancelEdit");
    },
    initData(val) {
      this.initImg("annexDegree", true, val.annexDegree);
      this.initImg("annexDiploma", true, val.annexDiploma);
      this.initImg("annexDrivingLicense", true, val.annexDrivingLicense);
      this.initImg("annexEnglishLevel", true, val.annexEnglishLevel);
      this.initImg("annexReward", true, val.annexReward);
      this.initImg("annexPthLevel", true, val.annexPthLevel);
      this.initImg("annexNoCriminal", true, val.annexNoCriminal);
      this.initImg("annexNcreLevel", true, val.annexNcreLevel);
      this.initImg("annexMajor", true, val.annexMajor);
      this.initImg("annexBlackWhitePhoto", true, val.annexBlackWhitePhoto);
      this.initImg("annexPractising", true, val.annexPractising);

      this.initImg("annexIdCard", false, val.annexIdCard);
      this.initImg("annexHousehold", false, val.annexHousehold);
    },
    testRemove(e) {},
    handleCancel() {
      this.previewVisible = false;
    },

    uploadFiles(params, type, bool, number) {
      var that = this;

      const formData = new FormData();
      formData.append("files", params.file);

      uploadFile(formData).then(res => {
        if (number && that[type.substr(5) + "List"].length === number) {
          return;
        }
        that[type.substr(5) + "List"].push({
          uid: res.data[0],
          name: res.data[0],
          status: "done",
          url: res.data[0]
        });

        if (bool) {
          that[type] = res.data[0];
        } else {
          that[type + "List"].push(res.data[0]);
        }
      });
    },
    initImg(type, bool, url) {
      if (!url) {
        return [];
      }

      var that = this;

      if (bool) {
        that[type.substr(5) + "List"].push({
          uid: url,
          name: url,
          status: "done",
          url: url
        });
        that[type] = url;
      } else {
        const arr = url.split(",");

        arr.forEach(item => {
          that[type.substr(5) + "List"].push({
            uid: item,
            name: item,
            status: "done",
            url: item
          });
          that[type + "List"].push(item);
        });
      }
    },
    handlePreview(file, isPending) {
      const images = file.url || file.thumbUrl;
      const visible = true;
      this.previewImage = images;
      this.previewVisible = visible;
    },
    handleChange(e, type, bool) {
      if (e.file.status === "removed") {
        if (bool) {
          this[type.substr(5) + "List"] = e.fileList;
          this[type] = "";
        } else {
          this[type.substr(5) + "List"] = e.fileList;

          const arr = [];
          e.fileList.forEach(item => {
            arr.push(item.url);
          });

          this[type + "List"] = arr;
        }
      }
    },

    submit() {
      var that = this;
      //   const data = {
      const data = {};
      data.annexIdCard = this.annexIdCardList.join(",");
      // data.id = this.employInfo.id
      data.phone = this.employInfo.phone;
      data.annexDegree = this.annexDegree;
      data.annexDiploma = this.annexDiploma;
      data.annexDrivingLicense = this.annexDrivingLicense;
      data.annexEnglishLevel = this.annexEnglishLevel;
      data.annexReward = this.annexReward;
      data.annexPthLevel = this.annexPthLevel;
      data.annexNoCriminal = this.annexNoCriminal;
      data.annexNcreLevel = this.annexNcreLevel;
      data.annexMajor = this.annexMajor;
      data.annexHousehold = this.annexHouseholdList.join(",");
      data.annexBlackWhitePhoto = this.annexBlackWhitePhoto;
      data.annexPractising = this.annexPractising;
      updateEmpAllInfo(data).then(res => {
        this.$notification["success"]({
          message: "修改成功"
        });
        that.$emit("cancelEdit");
      });
    }
  }
};
</script>

<style scoped>
.basicInfo-button-group {
  text-align: center;
  padding-bottom: 24px;
}

.remove >>> .anticon-delete {
  display: none;
}
</style>
